<template>
  <div class="topBar">
    <span class="icon_menu" v-if="$route.meta.level == 1" @click="clickLeftNav"></span>
    <span class="icon_left" @click="back" v-if="$route.meta.level !== 1"></span>
    <span class="title">{{$route.meta.title}}</span>

    <div class="icon_right">
      <span class="icon_screen" v-if="$route.meta.rightIcon == 'screen'"></span>
      <span class="icon_txt" v-if="$route.meta.rightIcon == '保存'">保存</span>
      <span class="icon_add" v-if="$route.meta.rightIcon == 'add'"></span>
      <span class="icon_txt" v-if="$route.meta.rightIcon == 'setting'">设置</span>
      <span class="icon_txt" v-if="$route.meta.rightIcon == 'complete'">完成</span>
    </div>

    <div class="left_nav">
      <van-popup
        v-model="showLeftNav"
        position="left"
        round
        :style="{ height: '85%', width: '65%' }"
      >
        <div class="left_nav_title">
          更多
        </div>
        <div class="left_nav_list">
          <ul class="list">
            <li class="item" v-for="(item, index) in leftNavList" :key="index" @click="clickNav(item)">
              <i class="left_nav_icon" :style="{backgroundImage: `url(http://www.mingxiaoclub.cn/mobileSys/menuIcon/${item.icon}.png)`, backgroundSize: 'contain'}"></i>
              <span>{{item.name}}</span>
            </li>
          </ul>
        </div>
      </van-popup>
    </div>
  </div>

</template>
<script>
import {
  createNamespacedHelpers,
  mapState
} from "vuex";
let {
  mapGetters,
  mapActions
} = createNamespacedHelpers("adminBasic");
import axios from "axios";

export default {
  name: "topBar",
  data() {
    return {
      jwtAuth: {},
      showLeftNav: false,
      leftNavList: [
        {
          name: '经营一览',
          url: 'homeData',
          icon: 'leftNav_icon1',
        },
        // {
        //   name: '目标追踪',
        //   url: '',
        //   icon: 'leftNav_icon2',
        // },
        {
          name: '咨询管理',
          url: '',
          icon: 'leftNav_icon4',
        },
        {
          name: '个人中心',
          url: 'personCenter',
          icon: 'leftNav_icon3',
        },
        {
          name: '退出',
          url: '',
          icon: 'exit',
        },
      ]
    };
  },
  created() {
    this.jwtAuth = JSON.parse(sessionStorage.getItem('jwtAuth'));
  },
  computed: {
    // ...mapState(["adminMenu", "realname"])
  },
  watch: {
    // realname(newVal, oldVal) {
    //   this.userName = newVal
    // }
  },
  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),

    clickLeftNav() {
      this.showLeftNav = true;
    },
    clickNav(item) {
      console.log(item);
      if(item.url == 'personCenter') {
        this.$router.push({
          name: "personCenter",
          params: {
            id: this.jwtAuth.accountId,
          }
        });
        this.showLeftNav = false;
      }

      if(item.url == 'homeData') {
         this.$router.push({
          name: "homeData",
        });
        this.showLeftNav = false;
      }

      if(item.name == '咨询管理') {
        this.$router.push({
          name: 'workBench'
        })
        this.showLeftNav = false;
      }

      if(item.name == '退出') {
        this.$dialog.confirm({
          message: '确定退出吗？'
        }).then(() => {
          sessionStorage.clear();
          this.$notify({ type: 'success', message: '退出成功',duration: 1200 });
          this.$router.push({
            name: "login"
          });
        });
      }
    },

    back() {
      // console.log(this.$router.history);
      this.$router.go(-1);
    }
  },
  components: {
  }
};
</script>
<style scoped>
.topBar {
  position: relative;
  text-align: center;
  padding: 0 .266667rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.topBar .title {
  font-size:.426667rem;
  color: #fff;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 0 auto;
}

.topBar .icon_menu {
  background: url('../../assets/img/icon_menu.png') 0 0 no-repeat;
  background-size: 100%;
  width: .6rem;
  height: .6rem;
}

/* .topBar  */
.icon_right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon_txt {
  font-size: .426667rem;
  color: #fff;
}

.left_nav_title {
  height: 1.2rem;
  background:linear-gradient(236deg,rgba(255,152,83,1) 0%,rgba(255,151,151,1) 100%);
  color: #fff;
  font-size: .426667rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left_nav_list .item {
  font-size: .373333rem;
  color: #666666;
  text-align: left;
  padding-left: .30rem;
  height: 1.106667rem;
  display: flex;
  align-items: center;
}
.left_nav_list .item {
  border-bottom: .5px solid #E9E9E9;
}
.left_nav_list .item i {
  display: inline-block;
  width: .48rem;
  height: .48rem;
  background-repeat: no-repeat;
  background-position: center center;
}
.left_nav_list .item span {
  margin-left: .426667rem;
}

</style>
